<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹出框</title>
	<style>
		*{
			padding: 0;
			margin:0;
		}
		body{
			width: 100%;
			height:100%;
			background: #fff;
		}
		.toggleModal{
			padding: 10px 20px;
			color: white;
			background: #409EFF;
			border:none;
			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.mask{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			z-index: 100;
			display: none;
		}
		.modal{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			transform: translate(-50%,-50%);
			border-radius: 5px;
			background: #fff;
			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
			z-index: 120;
			display: none;
		}
		.modal .modal-header{
			height: 50px;
			border-bottom: 1px solid #f5f5f5;
			padding: 0 15px;
		}
		.modal .modal-header p {
			line-height: 50px;
			display: inline-block;
		}
		.modal .modal-header .title{	
			font-size: 18px;
			color: #333;
		}
		.modal .modal-header .close{
			float: right;
			font-size: 26px;
			margin-top: -2px;
			color: #9C9FA4;
			cursor: default;
		}
		.modal .modal-content{
			min-height: 100px;
			height: 100%;
		}
		.modal .modal-footer .btn{
			padding: 0 20px;
			height: 36px;
			line-height: 36px;
			color: white;
			background: #409EFF;
			border: none;
		}
		.modal .modal-footer{
			border-top: 1px solid #f5f5f5;
			padding: 15px;
			text-align: right;
 
		}
		.container::after{
			content:"";
			display: block;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="container">
		<div>
			<button class="toggleModal" id="toggleModal">触发遮罩层</button>
		</div>
		<div class="modal">
			<div class="modal-header">
				预览
			</div>
			<div class="modal-content">
				<iframe id="inlineFrameExample"
				    title="测试"
				    width="100%"
				    height="100%"
				    src="http://view.xdocin.com/xdoc?_xdoc=http://218.90.166.168:8092/nwxx/cjpilot/u/cms/lan/202109/22120938baun.pdf">
				</iframe>

			</div>
			<div class="modal-footer">
				<button class="close btn">关闭</button>
			</div>
		</div>
		<div class="mask"></div>
	</div>
	<script>
		window.onload = function(){
			// 获取需要使用到的元素
			var toggleModal = document.getElementById("toggleModal");
			var container = document.getElementsByClassName("container")[0];
			var mask = document.getElementsByClassName("mask")[0];
			var modal = document.getElementsByClassName("modal")[0];
			var closes = document.getElementsByClassName("close");
			toggleModal.onclick = show;
			closes[0].onclick = close;
			function show(){
				mask.style.display = "block";
				modal.style.display = "block";
			}
			function close(){
				mask.style.display = "none";
				modal.style.display = "none";
			}
		}
	</script>
</body>
</html>